<template>
    <div class="user">
        <div class="opeation">
            <div class="search">
                <el-input placeholder="请输入内容" v-model="search" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>

            <div class="add">
                <el-button type="primary">新增</el-button>
            </div>
        </div>

        <div class="data-list">
            <el-table :data="userList" style="width: 100%">
                <el-table-column prop="phoneNumber" label="手机号">
                </el-table-column>
                <el-table-column prop="nickname" label="网名">
                </el-table-column>
                <el-table-column prop="balance" label="账户余额">
                </el-table-column>
                <el-table-column prop="level" label="等级">
                </el-table-column>
                <el-table-column prop="vip" label="vip">
                </el-table-column>
                <el-table-column prop="createTime" label="注册时间" width="180">
                </el-table-column>
                <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">
                        <span v-show="scope.row.status == 0">冻结</span>
                        <span v-show="scope.row.status == 1">正常</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <div class="option">
                            <el-button size="mini">编辑</el-button>
                            <el-button size="mini" type="danger">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="page-box">
            <el-pagination background layout="prev, pager, next" :page-size="size" :total="total"
                @current-change="currentPageEvent">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import API_URI from '@/util/API/ApiUtil';
export default {
    data() {
        return {
            userList: [],
            total: 0,
            pages: 0,
            current: 0,
            size: 0,
            search: '',
        }
    },
    created() {
        this.getUserList(1)
    },
    methods: {
        getUserList(current) {
            let data = {
                current
            }
            this.$axios.post(API_URI.GET_USERS, data)
                .then(res => {
                    if (res.code == 200) {
                        this.userList = res.data.userList.records
                        this.pages = res.data.userList.pages
                        this.current = res.data.userList.current
                        this.size = res.data.userList.size
                        this.total = res.data.userList.total
                    } else {
                        this.$error(res.message)
                    }
                })
        },
        currentPageEvent(current) {
            this.getUserList(current)
        }
    }
}
</script>

<style scoped>
.user {
    /* width: 95%;
    margin: auto; */
}

.user .opeation {
    display: flex;
    justify-content: space-between;

    margin: 10px 0;
}

.user .search {
    width: 60%;
}

.user>.data-list {
    border-radius: 10px;
}

.option {
    display: flex;
}

.page-box {
    margin-top: 10px;
    text-align: center;
    ;
}
</style>